<template>
  <div class="message-settings">
    <div class="settings-header">
      <h2>消息设置</h2>
      <p>管理您的通知偏好和消息接收设置</p>
    </div>
    
    <div class="settings-content">
      <div class="form-section">
        <h3>私信设置</h3>
        <div class="setting-item">
          <div class="setting-info">
            <label>允许接收私信</label>
            <p>关闭后将不再接收任何私信</p>
          </div>
          <div class="radio-group">
            <label class="radio-option">
              <input type="radio" v-model="settings.privateMessage" value="all" />
              <span>所有人</span>
            </label>
            <label class="radio-option">
              <input type="radio" v-model="settings.privateMessage" value="following" />
              <span>我关注的人</span>
            </label>
            <label class="radio-option">
              <input type="radio" v-model="settings.privateMessage" value="mutual" />
              <span>互相关注</span>
            </label>
            <label class="radio-option">
              <input type="radio" v-model="settings.privateMessage" value="none" />
              <span>关闭（不允许任何人给我发私信）</span>
            </label>
          </div>
        </div>
      </div>
      
      <div class="form-section">
        <h3>通知设置</h3>
        <div class="setting-item">
          <div class="setting-info">
            <label>点赞通知</label>
            <p>有人点赞您的内容时通知您</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.likeNotification" />
            <span class="slider"></span>
          </label>
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <label>评论通知</label>
            <p>有人评论您的内容时通知您</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.commentNotification" />
            <span class="slider"></span>
          </label>
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <label>关注通知</label>
            <p>有人关注您时通知您</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.followNotification" />
            <span class="slider"></span>
          </label>
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <label>系统通知</label>
            <p>接收系统重要消息和公告</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.systemNotification" />
            <span class="slider"></span>
          </label>
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <label>课程更新通知</label>
            <p>您关注的课程有更新时通知您</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.courseUpdateNotification" />
            <span class="slider"></span>
          </label>
        </div>
      </div>
      
      <div class="form-section">
        <h3>邮件通知</h3>
        <div class="setting-item">
          <div class="setting-info">
            <label>每日摘要邮件</label>
            <p>每天发送一封包含重要动态的邮件</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.dailyEmailDigest" />
            <span class="slider"></span>
          </label>
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <label>周报邮件</label>
            <p>每周发送学习进度和推荐内容</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.weeklyEmailReport" />
            <span class="slider"></span>
          </label>
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <label>营销邮件</label>
            <p>接收产品更新、活动和优惠信息</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.marketingEmail" />
            <span class="slider"></span>
          </label>
        </div>
      </div>
      
      <div class="form-section">
        <h3>推送设置</h3>
        <div class="setting-item">
          <div class="setting-info">
            <label>浏览器推送</label>
            <p>在浏览器中接收实时推送通知</p>
          </div>
          <div class="push-controls">
            <label class="switch">
              <input type="checkbox" v-model="settings.browserPush" @change="toggleBrowserPush" />
              <span class="slider"></span>
            </label>
            <button v-if="!settings.browserPush" class="btn-link" @click="requestNotificationPermission">
              开启推送权限
            </button>
          </div>
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <label>推送时间段</label>
            <p>设置接收推送通知的时间范围</p>
          </div>
          <div class="time-range">
            <input type="time" v-model="settings.pushStartTime" />
            <span>至</span>
            <input type="time" v-model="settings.pushEndTime" />
          </div>
        </div>
        
        <div class="setting-item">
          <div class="setting-info">
            <label>免打扰模式</label>
            <p>开启后将暂停所有推送通知</p>
          </div>
          <label class="switch">
            <input type="checkbox" v-model="settings.doNotDisturb" />
            <span class="slider"></span>
          </label>
        </div>
      </div>
      
      <div class="form-actions">
        <button class="btn-primary" @click="saveSettings">保存设置</button>
        <button class="btn-secondary" @click="resetSettings">恢复默认</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MessageSettings',
  data() {
    return {
      settings: {
        privateMessage: 'all',
        likeNotification: true,
        commentNotification: true,
        followNotification: true,
        systemNotification: true,
        courseUpdateNotification: true,
        dailyEmailDigest: false,
        weeklyEmailReport: true,
        marketingEmail: false,
        browserPush: false,
        pushStartTime: '09:00',
        pushEndTime: '22:00',
        doNotDisturb: false
      },
      defaultSettings: {}
    }
  },
  mounted() {
    this.loadSettings();
  },
  methods: {
    loadSettings() {
      // 从本地存储加载设置
      const savedSettings = localStorage.getItem('messageSettings');
      if (savedSettings) {
        this.settings = { ...this.settings, ...JSON.parse(savedSettings) };
      }
      this.defaultSettings = { ...this.settings };
    },
    toggleBrowserPush() {
      if (this.settings.browserPush) {
        this.requestNotificationPermission();
      }
    },
    async requestNotificationPermission() {
      if ('Notification' in window) {
        const permission = await Notification.requestPermission();
        if (permission === 'granted') {
          this.settings.browserPush = true;
          this.$message?.success('推送权限已开启');
        } else {
          this.settings.browserPush = false;
          this.$message?.warning('推送权限被拒绝');
        }
      } else {
        this.$message?.error('您的浏览器不支持推送通知');
      }
    },
    saveSettings() {
      localStorage.setItem('messageSettings', JSON.stringify(this.settings));
      console.log('保存消息设置:', this.settings);
      this.$message?.success('消息设置保存成功');
    },
    resetSettings() {
      this.settings = { ...this.defaultSettings };
      localStorage.removeItem('messageSettings');
      this.$message?.info('已恢复默认设置');
    }
  }
}
</script>

<style scoped>
.message-settings {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.settings-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}

.settings-header h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #333;
}

.settings-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.form-section {
  margin-bottom: 30px;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
}

.form-section h3 {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #333;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid #e5e5e5;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-info {
  flex: 1;
  margin-right: 20px;
}

.setting-info label {
  display: block;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.setting-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

.radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}

.radio-option input[type="radio"] {
  margin: 0;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  flex-shrink: 0;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #007bff;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.push-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-link {
  background: none;
  border: none;
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}

.btn-link:hover {
  color: #0056b3;
}

.time-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.time-range input[type="time"] {
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.time-range span {
  color: #666;
  font-size: 14px;
}

.form-actions {
  display: flex;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid #e5e5e5;
}

.btn-primary,
.btn-secondary {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background-color: #545b62;
}
</style>